<!-- container box 嵌套 box -->
<template>
  <div class="nesting-box box-footer">
    <div class="nesting-main">
      <el-form @submit.native.prevent>
        <!-- <el-form-item label="插入位置" :label-width="formLabelWidth" style="margin-bottom: 0px;">
          <el-radio-group v-model="containerCol.position">
            <el-radio size="mini" :label="-1">容器组件内顶部</el-radio>
            <el-radio size="mini" :label="-2">容器组件内底部</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="栅格类型" :label-width="formLabelWidth" style="margin-bottom: 0px;">
          <el-radio-group v-model="containerCol.girdtype" class="radio-disblock">
            <el-radio size="mini" label="col-sm">768px及以下（手机竖屏）换行</el-radio>
            <el-radio size="mini" label="col-md">992px及以下（手机横屏）换行</el-radio>
            <el-radio size="mini" label="col-lg">1200px及以下（ipad）换行</el-radio>
            <el-radio size="mini" label="col-xs">不换行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="行数" :label-width="formLabelWidth" style="margin-bottom: 0px;">
          <el-input size="mini" type="number" style="width:80px;" v-model="containerCol.row" min="1" :max="maxrow"
            placeholder="" @blur="containerCol.row = onlyNumber(containerCol.row)"></el-input>
        </el-form-item>
        <el-form-item label="列数" :label-width="formLabelWidth" style="margin-bottom: 0px;">
          <el-input size="mini" type="number" style="width:80px;" v-model="containerCol.col" min="1" :max="maxcol"
            placeholder="" @blur="containerCol.col = onlyNumber(containerCol.col)"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-footer">
      <el-button @click.stop="appendContainerCol" type="primary" size="mini">
          添加
      </el-button>
    </div>
  </div>
</template>

<script>
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
export default {
  props: {
    // 调用方法所需参数
    tmpContainerId: {
      type: String
    },
    maxrow: {
      type: Number,
      default: 48
    },
    maxcol: {
      type: Number,
      default: 24
    },
    close: {
      type: Function
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      formLabelWidth: '100px',
      // 默认数据
      containerCol: {
        position: -2,
        girdtype: 'col-xs',
        row: 1,
        col: 1
      }
    }
  },
  methods: {
    addclose () {
      this.containerCol.position = -2
      this.containerCol.girdtype = 'col-xs'
      this.containerCol.row = 1
      this.containerCol.col = 1
      this.close()
    },
    onlyNumber (value) {
      let valuefilter = value.toString().replace(/^\.+|[^\d.]/g, '')
      return valuefilter || 1
    },
    appendContainerCol () {
      BackendjsFunctions.addContainerFormcol(this.tmpContainerId, this.containerCol.row, this.containerCol.col, this.containerCol.position, this.containerCol.girdtype)
      this.addclose()
    }
  }
}
</script>

<style scoped lang="scss">
.nesting-main {
  min-height: 230px;
}
.radio-disblock {
  padding-top: 5px;
  padding-bottom: 10px;

  /deep/ .el-radio {
    line-height: 30px;
    display: block;
  }
}
</style>
